import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Checkbox } from "antd";
import { text_check } from "../../utils";

export default function MenuCheckBox(props) {
  const { t } = useTranslation();
  const CheckboxGroup = Checkbox.Group;

  const { item } = props;
  const plainOptions = item.children.map((ele) => ele.menu_index);
  const checked = item.child_checked?.length === item.children.length;
  const indeterminate = item.indeterminate;
  const groupOptions = item.children.map((child) => {
    return {
      label: text_check(child),
      value: child.menu_index,
      key: child.menu_index,
    };
  });
  const [checkedList, setCheckedList] = useState(item.child_checked);
  const checkebox_change = (e) => {
    console.log(e);
    setCheckedList(e.target.checked ? plainOptions : []);
  };
  const child_checkbox_group_change = (value) => {
    setCheckedList(value);
  };

  return (
    <div className="checked_group_box">
      <Checkbox
        indeterminate={indeterminate}
        onChange={checkebox_change}
        checked={checked}
      >
        {text_check(item)}
      </Checkbox>
      <CheckboxGroup
        value={checkedList}
        onChange={child_checkbox_group_change}
        options={groupOptions}
      ></CheckboxGroup>
    </div>
  );
}
